import VisCUNode from "@/types/VisCUNode";
import NodeBox from "./NodeBox";
import TopLevelNode from "./TopLevelNode/TopLevelNode";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import materialLight from "react-syntax-highlighter/dist/cjs/styles/prism/material-light";

// 需要CUNode以及对应TwoFileRefactoringDetector? 没有情况对应文件被删除或新增
// 只需要负责渲染CU，TreeBar做出选择后传入一个Range，需要在本组件中找到对应DOM
export default function CUNode(props: { node: VisCUNode }) {
  const { node } = props;
  const pathSegments = node?.pathString.replaceAll("\\", "/").split("/");
  const fileName = pathSegments[pathSegments.length - 1];
  return (
    <NodeBox
      range={node.range}
      displayName={fileName}
      color="#0077B5"
      icon={<span className="iconfont icon-java" />}
    >
      {/* imports */}
      {node.importStmts.length > 0 && (
        <NodeBox
          displayName={"imports"}
          color="#34465D"
          maxChildrenHeight="150px"
          icon={<span className="iconfont icon-import" />}
        >
          {node.importStmts.map((importStmt) => (
            <SyntaxHighlighter
              key={importStmt}
              language="java"
              style={materialLight}
              customStyle={{ border: "0", padding: 2 }}
            >
              {importStmt}
            </SyntaxHighlighter>
          ))}
        </NodeBox>
      )}
      {/* class, interface, enum */}
      {node.children.map((child) => (
        <TopLevelNode node={child} key={JSON.stringify(child.range)} />
      ))}
    </NodeBox>
  );
}
